<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/element-ui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<title>购物车</title>
	</head>

	<body>
		<div class="top_bar_wrap">
			<div class="top_bar">
				<div class="top_bar_lf lf">
					您好，欢迎来到爱贝宠宠物网！
				</div>
				<div class="top_bar_rg rg">
					<a class="login rg" href="login.html">登录</a>
					<a class="rigester rg" href="register.html">注册</a>
					<a href="shopCar.html"><span class="shop_car rg">购物车&nbsp;<span>0</span></span></a>
					<a class="help rg" href="#">帮助中心</a>
					<a class="help rg j_my_account" href="my_account.html">我的账户</a>
					
				</div>
			</div>
		</div>
		<div class="header_wrap">
			<div class="header_left lf">
				<a href="index.html"><img src="images/logo.png" /></a>
			</div>
			<div class="header_center lf">
				<div class="search_wrap">
					<select class="lf" name="">
						<option value="">商品</option>
					</select>
					<input class="lf search_content" type="text" />
					<input class="lf search_btn" type="button" name="" id="" value="搜索" />
				</div>
			</div>
			<div class="header_right lf">
				<div class="lf phone_logo">
					<img src="images/icon_phone.jpg" />
				</div>
				<div class="lf">
					<p class="service_title">客户服务电话</p>
					<p class="service_num">4006007272</p>
				</div>
			</div>
		</div>
		<!--菜单部分-->
		<div class="menu">
			<div class="menu_inner">
				<ul>
					<li class="whole_goods_menu selected">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-liebiaoshitucaidan"></use>
						</svg>
						<a href="javascript:void(0)">全部商品分类</a>
					</li>
					<li>
						<a href="index.html">首页</a>
					</li>
					<li>
						<a href="product.html">宠物商品</a>
					</li>
					
				</ul>
				<!--下拉菜单-->
				<div class="drop_down_menu">
					<ul>
						<li class="active" belongto="dog">
							<span class="drop_down_menu_text">狗狗专区</span>
							<span class="arrow">&gt;</span>
						</li>
						<li belongto="cat">
							<span class="drop_down_menu_text">猫咪专区</span>
							<span class="arrow">&gt;</span>
						</li>
						<li belongto="pet">
							<span class="drop_down_menu_text">小宠专区</span>
							<span class="arrow">&gt;</span>
						</li>
					</ul>
				</div>
				<div class="down_menu_right" belongto='dog'>
					<dl>
						<dt>按品牌分  <span class="arrow_right">&gt;</span></dt>
						<!--<dd>爱丽思IRIS</dd>
						<dd>爱丽思IRIS</dd>
						<dd>爱丽思IRIS</dd>-->
					</dl>
					<dl>
						<dt>按功能分 <span class="arrow_right">&gt;</span></dt>
						<!--<dd>户外出行</dd>
						<dd>营养食品</dd>
						<dd>洗浴清洁</dd>
						<dd>玩具用品</dd>-->
					</dl>
				</div>
				<div class="down_menu_right" belongto='cat'>
					<dl>
						<dt>按品牌分  <span class="arrow_right">&gt;</span></dt>

					</dl>
					<dl>
						<dt>按功能分 <span class="arrow_right">&gt;</span></dt>

					</dl>
				</div>
				<div class="down_menu_right" belongto='pet'>
					<dl>
						<dt>按品牌分  <span class="arrow_right">&gt;</span></dt>

					</dl>
					<dl>
						<dt>按功能分 <span class="arrow_right">&gt;</span></dt>

					</dl>
				</div>
			</div>
		</div>
		<div class="shop_car" id="v_shop_car">
			<div class="shop_car_top">
				<p>我的购物车<span class="car_product_num">0</span><span>个商品</span></p>
			</div>
			<div class="shop_car_content">
				<div class="shopcar_list_nav">
					<span class="product_info">商品信息</span>
					<span class="price">单价(元)</span>
					<span class="num">数量</span>
					<span class="allPrice">金额(元)</span>
					<span class="option">操作</span>
				</div>
				<div class="shop_name">店铺：爱贝宠商城<img src="images/listening.png" alt=""></div>
				<ul class="shopcar_list_content">
					<li class="shopcar_lists" v-for='list in shop_car_goods_list' :data-goodid='list.id'>
						<span class="is_checked">
							<input  type="checkbox" :value="list.id" v-model="checked_list"><span></span>
						</span>
						<span class="product_img"><img :src="'/public'+list.logo" alt=""></span>
						<span class="product_name">{{list.goods_name}}</span>
						<span class="product_spec">{{list.format_name}}</span>
						<span class="price">￥{{list.sell_price}}</span>
						<span class="num">
				        	<button class="minus" @click="minusOne(list)">-</button>
				        	<input type="number" @change="change_nums(list)" v-model="list.num" min='1'>
				        	<button class="add" @click="addOne(list)">+</button>
			        	</span>
						<span class="allPrice">￥{{list.tprice}}</span>
						<span class="option" @click="del_single_good(list.id)">删除</span>
					</li>
				</ul>
			</div>
			<div class="shop_car_settlment">
				<span class="is_checkedAll">
					<input type="checkbox" @change="checkedAll" v-model="checkAll">
					<span></span>
				</span>
				<span class="checkAll">全选</span>
				<span class="delAll">删除</span>
				<span class="detail">已选商品<span class="numAll">{{checked_goods_num}}</span>件&nbsp;合计（不含运费）：<span class="priceAll">￥{{total_price}}</span></span>
				<span class="settlement"><button>结算</button></span>
			</div>
		</div>
		<div class="footer">
			<p>版权所有：天津晟联美图贸易有限公司</p>
			<p>Copyright © 2017 http://www.ibabypet.com.cn 爱贝宠物网 &nbsp; 津ICP备17006246号</p>
		</div>
		<!--购买弹窗-->
		<div class="payment_modal">
		</div>
		<div class="payment_scan_wrap">
			<p>手机扫码支付</p>
			<div class="weixin_wrap">
				<img src="images/weixin_logo.png" />
				<p>微信支付</p>
				<img class="wx_erweima" src="images/weixin.jpg" />
				
			</div>
			<div class="zhifu_wrap">
				<img src="images/zhifubao_logo.png" />
				<p>支付宝支付</p>
				<img class="zfb_erweima" src="images/zhifubao.jpg" />
			</div>
		</div>
		<script src="js/shop_car.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>